<template>
	<view :class="['geek-order-item',item.type]">
		<view class="header flex justify-between">
			<uni-tag :text="item.typeName" :type="item.type === 'purchase' ? 'success':'primary'"
				size="small"></uni-tag>

			<view class="number flex align-center"
				@click="$tab.navigateTo(`/pages/order/detail?id=${item.id}&type=${item.type}`)">
				<!-- <uni-icons custom-prefix="iconfont" :type="item.icon" color="#3c9cff" size="16"></uni-icons> -->
				<up-text :text="item.orderNo" :lines="1" type="primary" size="14"></up-text>
				<uni-icons type="right" color="#3c9cff" size="15"></uni-icons>
			</view>


			<uni-tag :text="statusInfo.name" :type="statusInfo.color" size="small" :inverted="true" circle></uni-tag>
			<!-- custom-style="background-color: #4335d6; border-color: #4335d6; color: #fff;" -->
		</view>

		<view class="body" @click="$tab.navigateTo(`/pages/order/detail?id=${item.id}&type=${item.type}`)">
			<view class="img" v-if="showThumb">
				<u-image :src="thumb" mode="widthFix" width="240rpx" height="180rpx"></u-image>
			</view>

			<view class="info">
				<view class="title">
					<view>{{title}}</view>
					<view><uni-icons type="closeempty" color="#666666" size="12"></uni-icons>{{total/100}}</view>
				</view>

				<view class="dlbox">
					<view class="dt">收款账号：</view>
					<view class="dd">{{ item.cashier }}</view>
					<view class="dt" style="margin-left: 15rpx;">
						支付方式：
					</view>
					<view class="dd">
						{{item.paymentWay || item.accountType}}
					</view>
				</view>

				<view class="dlbox">
					<view class="dt">
						创建时间：
					</view>
					<view class="dd">
						{{item.createTime}}
					</view>
				</view>
			</view>
		</view>

		<!-- 操作按钮 -->
		<view class="actions" v-if="statusInfo.type == 1">
			<block v-if="item.type === 'shipping'">
				<up-button type="error" @click="onConfirm(item.id)" :hairline="true" shape="circle" :plain="true"
					size="mini" text="确认收款"></up-button>
				<up-button type="info" @click="$tab.navigateTo(`/pages/order/detail?id=${item.id}&type=${item.type}`)"
					v-if="!counting" :hairline="true" shape="circle" :plain="true" size="mini" text="去申诉"></up-button>
			</block>
			<block v-if="item.type === 'purchase'">
				<up-button type="success"
					@click="$tab.navigateTo(`/pages/order/detail?id=${item.id}&type=${item.type}`)" :hairline="true"
					shape="circle" :plain="true" size="mini" text="去付款"></up-button>
			</block>
		</view>

		<view class="footer">
			<!-- 倒计时 -->
			<view class="timebox" v-if="statusInfo.type == 1 && item.type === 'shipping'">
				<!-- <text>订单有效期：</text> -->
				<uni-icons custom-prefix="iconfont" type="icon-daojishi_daojishi" color="#999999" size="16"></uni-icons>
				<template v-if="countTime && counting">
					<up-count-down class="time" :time="countTime" format="HH 时 mm 分 ss 秒" autoStart millisecond
						@finish="onFinish"></up-count-down>
				</template>
				<up-text text="已失效" type="error" size="12" v-else></up-text>
			</view>

			<view class="total">
				<!-- 	<view>
					共 <text>{{goodList.length}}</text> 件商品  
				</view> -->
				<view>
					金额：<up-text :text="originalAmount" bold color="#3c9cff" :size="14"></up-text>
					<!-- <view class="del" v-if="actualAmount !== amount">
						<up-text mode="price" :text="amount" color="#999999" size="12"></up-text>
					</view> -->
				</view>
				<view>
					利润：<up-text :text="sellerProfit" bold color="#ff0000" :size="14"></up-text>
					<!-- <view class="del" v-if="actualAmount !== amount">
						<up-text mode="price" :text="amount" color="#999999" size="12"></up-text>
					</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import _ from 'lodash'
	import {
		confirm
	} from '@/api/seller/order'
	export default {
		data: {
			counting: false
		},

		props: {
			item: {
				type: Object,
				default () {
					return {}
				}
			},
			showThumb: {
				type: Boolean,
				default: false
			}
		},

		computed: {
			goodList() {
				return _.get(this.item, 'goodList', []) || []
			},

			goods() {
				return _.get(this.item, 'goodList.0', {}) || {}
			},

			amount() {
				return (Number(_.get(this.item, 'amount', 0) || 0) / 100).toFixed(2)
			},

			originalAmount() {
				if (this.item.type === 'purchase') {
					return this.amount
				}
				return (Number(_.get(this.item, 'originalAmount', 0) || 0) / 100).toFixed(2)
			},

			sellerProfit() {
				return (Number(_.get(this.item, 'sellerProfit', 0) || 0) / 100).toFixed(2)
			},

			title() {
				return this.goods?.title || ''
			},

			thumb() {
				return this.goods?.image || ''
			},

			total() {
				return this.goods?.total || 0
			},

			unit() {
				return this.goods?.unit || ''
			},

			price() {
				return this.goods?.price || 0
			},

			countTime() {
				const time = new Date(this.item.expireTime).getTime() - new Date().getTime()
				return time > 0 ? time : 0
			},

			updateList() {
				return _.get(this.$store, 'state.user.updateList', null) || null
			},

			statusInfo() {
				const names = [{
						type: 0,
						name: '初始化',
						color: 'default'
					},
					{
						type: 1,
						name: '待支付',
						color: 'warning'
					},
					{
						type: 2,
						name: '已支付',
						color: 'success'
					},
					{
						type: 3,
						name: '支付失败',
						color: 'error'
					},
					{
						type: 8,
						name: '申诉中',
						color: 'warning'
					},
					{
						type: 9,
						name: '取消支付',
						color: 'default'
					}
				]
				return _.find(names, {
					type: this.item?.status
				}) || {}
			}
		},

		watch: {
			countTime() {
				this.counting = this.countTime > 0
			}
		},

		mounted() {
			this.counting = this.countTime > 0
		},

		methods: {
			onFinish() {
				this.counting = false
				this.$store.commit('backgroundMusicPlay', 2)
			},

			onConfirm(id) {
				const self = this
				self.$store.commit('SET_UPDATE_LIST')
				uni.showModal({
					title: '温馨提示',
					content: '您将操作确认收款，是否确认？',
					cancelText: '取消',
					confirmText: '确认',
					success: function(res) {
						if (res.confirm) {
							confirm(id).then(() => {
								self.$modal.msgSuccess('确认收款成功')
								const args = {
									...self.item,
									status: 2
								}
								self.$emit('updateStatus', 2)
								self.counting = false
								self.$store.commit('SET_UPDATE_LIST', args)
								self.$store.dispatch('SellerInfo')
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.geek-order-item {
		// border-bottom: 1px solid #f0f0f0;
		padding: 10rpx 20rpx 24rpx;
		background-color: rgba(#ecf5ff, 0.1);
		border-radius: 10rpx;
		overflow: hidden;
		margin-top: 20rpx;
		border: 1px solid rgba(#94bcff, 0.15);
		border-bottom: 8rpx solid rgba(#2979ff, 0.5);

		&.purchase {
			border: 1px solid rgba(#a9e08f, 0.15);
			border-bottom: 8rpx solid rgba(#5ac725, 0.6);
			background-color: rgba(#f5fff0, 0.1);

			.header {
				border-bottom: 1px solid rgba(#f5fff0, 0.15);
			}

			.footer {
				border-top: 1px solid rgba(#a9e08f, 0.15);
			}
		}

		// &:last-child{
		// 	border-bottom:none;
		// 	padding-bottom: 0;
		// }

		.header {
			padding: 20rpx 0;
			border-bottom: 1px solid rgba(#94bcff, 0.15);
			margin-bottom: 20rpx;

			.number {
				cursor: pointer;
				flex: 1;
				margin: 0 20rpx;
				overflow: hidden;

				&::v-deep {
					.uni-icons {
						margin: 0 10rpx;
					}
				}
			}
		}

		.body {
			display: flex;
			align-items: center;

			.img {
				width: 200rpx;
				height: 150rpx;
				overflow: hidden;
				margin-right: 24rpx;
			}

			.info {
				flex: 1;
				overflow: hidden;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.title {
					font-size: 28rpx;
					color: #232323;
					line-height: 40rpx;
					margin-bottom: 10rpx;
					display: flex;
					align-items: center;

					view+view {
						margin-left: 6rpx;
					}
				}

				.dlbox {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					margin-top: 10rpx;

					.dt {
						white-space: nowrap;
						color: #999;
					}

					.dd {
						color: #333;
						white-space: nowrap;
					}
				}
			}
		}

		.actions {
			padding-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: flex-end;

			&::v-deep {
				.u-button {
					max-width: 25%;
					margin: 0;

					&+.u-button {
						margin-left: 30rpx;
					}
				}
			}
		}

		.footer {
			border-top: 1px solid rgba(#94bcff, 0.15);
			display: flex;
			align-items: center;
			margin-top: 20rpx;
			padding-top: 20rpx;

			.timebox {
				display: flex;
				align-items: center;
				font-size: 24rpx;

				&>text {
					white-space: nowrap;
				}

				.uni-icons {
					margin-right: 8rpx;
				}

				&::v-deep {
					.u-count-down__text {
						font-size: 24rpx;
						line-height: 30rpx;
						color: #ff0000;
						display: block;
						margin-top: 6rpx;
					}
				}
			}

			.total {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				text-align: right;
				flex: 1;
				overflow: hidden;
				justify-content: flex-end;
				white-space: nowrap;

				&>view {
					margin-left: 10rpx;
					display: flex;
					align-items: center;
					font-size: 20rpx;

					&:first-child {
						text {
							margin: 0 5rpx;
							display: block;
							color: #3c9cff;
							font-size: 30rpx;
							margin-top: 4rpx;
						}
					}
				}

				.del {
					display: flex;
					font-size: 24rpx !important;
					margin-left: 4rpx;

					&::v-deep {
						.u-text {
							margin-top: 4rpx !important;
						}

						.u-text__value {
							text-decoration: line-through !important;
						}
					}
				}

				.num {
					color: #3c9cff;
					font-size: 32rpx;
					font-weight: 600;
					margin-top: 3rpx;
				}
			}
		}
	}
</style>